<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item
        ><a routerLink="/">{{
          "list.breadcrumb.home" | translate
        }}</a></d-breadcrumb-item
      >
      <d-breadcrumb-item>{{
        "list.breadcrumb.formPage" | translate
      }}</d-breadcrumb-item>
      <d-breadcrumb-item>{{
        "list.breadcrumb.editableList" | translate
      }}</d-breadcrumb-item>
    </d-breadcrumb>
    <div class="da-content-banner-title">
      {{ "list.editableList.title" | translate }}
    </div>
    <div>{{ "list.editableList.description" | translate }}</div>
  </div>

  <div class="da-content-wrapper">
    <da-layout-row [daGutter]="[24, 24]">
      <da-col-item [daSpan]="24" [daXs]="24">
        <div class="da-list-container" dLoading [loading]="busy">
          <div class="da-list-content">
            <d-data-table
              #dataTable
              [dataSource]="listData"
              [scrollable]="true"
              [tableWidthConfig]="tableWidthConfig"
            >
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell>Id</th>
                  <th dHeadCell>Title</th>
                  <th dHeadCell>Priority</th>
                  <th dHeadCell>Iteration</th>
                  <th dHeadCell>Assignee</th>
                  <th dHeadCell>Status</th>
                  <th dHeadCell>Timeline</th>
                  <th dHeadCell>Actions</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                  <tr dTableRow *ngIf="rowIndex === 0">
                    <td dTableCell [attr.colspan]="tableWidthConfig.length">
                      <div
                        *ngIf="!headerNewForm"
                        (click)="newRow()"
                        class="cursor-pointer"
                      >
                        <span class="tips-icon icon-add"></span>
                        <span style="margin-left: 10px">Create new data</span>
                      </div>
                      <div *ngIf="headerNewForm" class="edit-padding-fix">
                        <da-admin-form
                          [formConfig]="formConfig"
                          [formData]="defaultRowData"
                          class="editable-row"
                          (submitted)="quickRowAdded($event)"
                          (canceled)="quickRowCancel()"
                        ></da-admin-form>
                      </div>
                    </td>
                  </tr>
                  <tr dTableRow>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['idEdit']"
                      [rowItem]="rowItem"
                      [field]="'id'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['idEdit']">{{ rowItem?.id }}</span>
                      <div *ngIf="rowItem['idEdit']" class="edit-padding-fix">
                        <input
                          class="devui-form-control"
                          name="id"
                          [(ngModel)]="rowItem.id"
                          [attr.maxlength]="100"
                          [attr.minlength]="3"
                        />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['titleEdit']"
                      [rowItem]="rowItem"
                      [field]="'title'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['titleEdit']"
                        ><d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag>
                        {{ rowItem?.title }}</span
                      >
                      <div
                        *ngIf="rowItem['titleEdit']"
                        class="edit-padding-fix"
                      >
                        <input
                          class="devui-form-control"
                          name="title"
                          [(ngModel)]="rowItem.title"
                          [attr.maxlength]="100"
                          [attr.minlength]="3"
                        />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['priorityEdit']"
                      [rowItem]="rowItem"
                      [field]="'priority'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['priorityEdit']"
                        ><d-tag
                          [tag]="rowItem?.priority"
                          [labelStyle]="rowItem?.priority"
                        ></d-tag
                      ></span>
                      <div
                        *ngIf="rowItem['priorityEdit']"
                        class="edit-padding-fix"
                      >
                        <d-select
                          name="priority"
                          [(ngModel)]="rowItem.priority"
                          [options]="priorities"
                        ></d-select>
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['iterationEdit']"
                      [rowItem]="rowItem"
                      [field]="'iteration'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['iterationEdit']">{{
                        rowItem?.iteration
                      }}</span>
                      <div
                        *ngIf="rowItem['iterationEdit']"
                        class="edit-padding-fix"
                      >
                        <input
                          dTextInput
                          size="sm"
                          [(ngModel)]="rowItem.iteration"
                        />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['assigneeEdit']"
                      [rowItem]="rowItem"
                      [field]="'assignee'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['assigneeEdit']">
                        <d-avatar
                          [name]="rowItem.assignee"
                          [width]="24"
                          [height]="24"
                        ></d-avatar>
                        <span style="margin-left: 6px">{{
                          rowItem.assignee
                        }}</span>
                      </span>
                      <div
                        *ngIf="rowItem['assigneeEdit']"
                        class="edit-padding-fix"
                      >
                        <input
                          dTextInput
                          size="sm"
                          [(ngModel)]="rowItem.assignee"
                        />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['statusEdit']"
                      [rowItem]="rowItem"
                      [field]="'status'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['statusEdit']"
                        ><span [ngClass]="rowItem?.status.split(' ')[0]">{{
                          rowItem?.status || "--"
                        }}</span></span
                      >
                      <div
                        *ngIf="rowItem['statusEdit']"
                        class="edit-padding-fix"
                      >
                        <d-select
                          name="status"
                          [(ngModel)]="rowItem.status"
                          [options]="['Stuck', 'Done', 'Working on it']"
                        ></d-select>
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [(editing)]="rowItem['dateEdit']"
                    >
                      <span *ngIf="!rowItem['dateEdit']">{{
                        rowItem?.timeline | i18nDate: "short":false
                      }}</span>
                      <form
                        *ngIf="rowItem['dateEdit']"
                        class="form-inline edit-padding-fix"
                      >
                        <div class="devui-form-group">
                          <div class="devui-input-group devui-dropdown-origin">
                            <input
                              class="devui-form-control search"
                              name="date"
                              [(ngModel)]="rowItem.timeline"
                              dDatepicker
                              appendToBody
                              #datePicker="datepicker"
                              [autoOpen]="true"
                              (ngModelChange)="onEditEnd(rowItem, 'dateEdit')"
                            />
                            <div
                              class="devui-input-group-addon"
                              (click)="datePicker.toggle()"
                            >
                              <i class="icon icon-calendar"></i>
                            </div>
                          </div>
                        </div>
                      </form>
                    </td>
                    <td>
                      <d-button
                        icon="icon-delete"
                        bsStyle="text-dark"
                        title="delete"
                        (click)="deleteRow(rowIndex)"
                      ></d-button>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <d-pagination
              [size]="'sm'"
              [total]="pager.total"
              [(pageSize)]="pager.pageSize"
              [(pageIndex)]="pager.pageIndex"
              [canViewTotal]="true"
              [canChangePageSize]="true"
              [canJumpPage]="true"
              [maxItems]="5"
              (pageIndexChange)="onPageChange($event)"
              (pageSizeChange)="onSizeChange($event)"
            >
            </d-pagination>
          </div>
        </div>
      </da-col-item>
    </da-layout-row>
  </div>
</div>
